<template>
    <div>
        <h3 class="Header">课程分类</h3>
        <div style="width: 100%; height: 10px;"></div>
        <v-chart class="chart" :option="option" autoresize />
    </div>
</template>

<script setup>
import { PieChart } from 'echarts/charts';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { ref } from "vue";
import VChart from "vue-echarts";
import { use } from 'echarts/core';

use([
    TooltipComponent, 
    LegendComponent, 
    PieChart, 
    CanvasRenderer,
]);

const course_type=ref([
    { value: 1048, name: '在线实训' },
    { value: 735, name: '就业培训' },
    { value: 580, name: '技能提升' },
    { value: 484, name: '师资培训' },
    { value: 300, name: '大数据推荐课程' },
])



// const option = ref({
const option = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data:course_type,
        }
    ]
});

</script>

<style scoped>
.chart {
    width: 100%;
    height: 40vh;
    /* 设置合适的高度 */
}
</style>
<!-- 没有后面这个，表格不会显示 -->